<template>
<div>

<el-row :gutter="20">
<el-col :span="14">

<el-form :model="form" inline >
	<el-form-item label="名称:" >
		<el-input v-model="form.name" ></el-input>
	</el-form-item>
	<el-form-item >
		<el-button type="primary" @click="search">查询</el-button>
	</el-form-item>
</el-form>

<el-table :data="list" border>
	<el-table-column prop="name" label="接口名称" align="center">
		
	</el-table-column>

	<el-table-column label="操作" width="100" align="center">
		<template slot-scope="scope">
			<el-button type="primary" size="mini" icon="el-icon-edit" circle
      		@click="edit(scope.row)"
      		></el-button>
			<el-button type="danger" size="mini" icon="el-icon-minus" circle
			@click="del(scope.row)"
			></el-button>
		</template>
	</el-table-column>
</el-table>

</el-col>

<el-col :span="10">
	<el-alert
	title="列表"
	type="info"
	:closable="false"
	show-icon>
		GET 请求 /v1/pn/api?service=接口名
	</el-alert>

	<el-alert
	title="详情"
	type="info"
	class="mt10"
	:closable="false"
	show-icon>
		GET 请求 /v1/pn/api/[info条件]?service=接口名
	</el-alert>

	<el-alert
	title="创建"
	type="info"
	class="mt10"
	:closable="false"
	show-icon>
		POST 请求 /v1/pn/api?service=接口名
	</el-alert>

	<el-alert
	title="更新"
	type="info"
	class="mt10"
	:closable="false"
	show-icon>
		PUT 请求 /v1/pn/api/[info条件]?service=接口名
	</el-alert>

	<el-alert
	title="删除"
	type="info"
	class="mt10"
	:closable="false"
	show-icon>
		DELETE 请求 /v1/pn/api/[info条件]?service=接口名
	</el-alert>
</el-col>
</el-row>
</div>
</template>

<script>


export default {
	
	name : 'interface',
	
	data () {
		return {
		  	list : [],

		  	form : {},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		async init () {
			this.list = await this.$http('api', {
				service : 'interface',
				requestType : 'get',
				...this.form,
			})

			console.log(this.list);
		},

		search () {
			this.init();
		},

		del (item) {

			this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {

				const res = await this.$http('delApi', {
					id : item.id,
					name : item.name,
					requestType : 'get',
				});

				this.$message({
					type: 'success',
					message: '删除成功!'
				});

				this.init();

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},

		edit (item) {
			this.$router.push({
        		name : 'dbtableconfig',
        		query : {
        			name : item.name,
        		}
        	});
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
